import React from 'react' // useState
import styles from './common.module.scss'
import QuestionCard from '../../components/QuestionCard'
import { Empty, Pagination, Spin, Typography } from 'antd'
import ListSearch from '../../components/ListSearch'
import useLoadQuestionListData from '../../hooks/useLoadQuestionListData'
import ListPage from '../../components/ListPage'

// const rawQuestionList = [
//   {
//     _id: 'q1',
//     title: '问卷1',
//     isPublished: false,
//     isStar: true,
//     answerCount: 5,
//     createdAt: '3月 10 日 13:23',
//   },
//   {
//     _id: 'q2',
//     title: '问卷2',
//     isPublished: true,
//     isStar: true,
//     answerCount: 5,
//     createdAt: '3月 11 日 15:30',
//   },
//   {
//     _id: 'q3',
//     title: '问卷3',
//     isPublished: true,
//     isStar: true,
//     answerCount: 5,
//     createdAt: '3月 12 日 17:01',
//   },
// ]

const { Title } = Typography

const Star: React.FC = () => {
  // const [questionList, setQuestionList] = useState(rawQuestionList)

  const { data = {}, loading } = useLoadQuestionListData({ isStar: true })
  const { list: questionList = [], total } = data

  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>我的问卷</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.content}>
        {loading && (
          <div style={{ textAlign: 'center' }}>
            <Spin />
          </div>
        )}
        {!loading && !questionList.length && <Empty description="暂无数据" />}
        {!loading &&
          questionList.length &&
          questionList.map((q: any) => {
            const { _id } = q
            return <QuestionCard key={_id} {...q} />
          })}
      </div>
      <div className={styles.footer}>
        <ListPage total={total} />
      </div>
    </>
  )
}

export default Star
